<template>
  <div class="aside-main">
    <ul class="room">
      <li class="item" v-for="(item, index) in roomList" :key="index">
        <el-tooltip class="box-item" :effect="themeStore.theme"  :content="item.room_name" placement="right">
          <el-image :src="item.room_pic" fit="cover" @click="changeChat(item)"></el-image>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { getRoomList } from '@/api/room';
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/store/models/user';
import { useTheme } from '@/store/models/theme';
import { Room } from '@/types/allTypes';




// 获取用户信息
const userStore = useUserStore()
// 获取主题信息
const themeStore = useTheme()

// 房间列表
const roomList = ref<Room[]>([])

//emit
const emit = defineEmits(['changeChat'])

onMounted(() => {
  // 页面初始化
  init()
})

function init() {
  // TODO: 获取房间列表
  let params = {
    user_id: userStore.getUserInfo.account
  }
  console.log(params)
  getRoomList(params).then(res => {
    roomList.value = res.data
    console.log(roomList.value)
  })
}

// 切换聊天室
function changeChat(item: Room) {
  // TODO: 切换聊天室
  // console.log(item)
  emit('changeChat', item)
}

</script>

<style scoped lang="scss">
.aside-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: var(--bg-color);
  padding: 1rem 0;

  .room {

    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // width: 100%;
    // height: 100%;
    // padding: 20px;
    .item {
      margin-bottom: 1rem;
      width: 3rem;
      height: 3rem;
      // border-radius: 1rem;

      //  overflow: hidden;
      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 1rem;
      }
    }
  }
}
</style>